<template>
	<view>
		<view class="headPicture">
			<image src="../../static/background/headBackground.jpg" mode=""></image>
		</view>
		<view class="container">
			<view class="notice">
				<view>请xx月xx号(即明天)报名志愿的同学</view>
				<view>扫码进行志愿报名和进入工作群签到退</view>
			</view>
			<view class="threeBox">
				<view class="Box">
					<view class="BoxTitle">志愿工作者群</view>
					<image src="../../static/img/group.jpg" mode=""></image>
				</view>
				<view class="Box">
					<view class="BoxTitle">明天上午</view>
					<image src="../../static/img/2weima1.jpg" mode=""></image>
				</view>
				<view class="Box">
					<view class="BoxTitle">明天下午</view>
					<image src="../../static/img/2weima2.jpg" mode=""></image>
				</view>
			</view>
			<view class="PlanTable">
				<view class="TableTitle">xx月xx号(明天)志愿者安排</view>
				<view class="table">
					<u-table>
						<u-tr class="u-tr">
							<u-th class="u-th">时间</u-th>
							<u-th class="u-th">姓名</u-th>
							<u-th class="u-th">电话</u-th>
						</u-tr>
						<u-tr class="u-tr" v-for="(item,index) in list" :key="item.id">
							<u-td class="u-td">{{item.time}}</u-td>
							<u-td class="u-td">
								<view class="td" v-for="user in item.info" style="">
									{{user.name}}
								</view>
							</u-td>
							<u-td class="u-td">
								<view class="td" v-for="user in item.info">
									{{user.phone}}
								</view>
							</u-td>
						</u-tr>
					</u-table>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						id: 1,
						time: '上午7：50-12：00',
						info: [
							{
								userId: 1,
								name: '输入文本',
								phone: '请输入电话'
							},
							{
								userId: 2,
								name: '输入文本',
								phone: '请输入电话'
							},
							{
								userId: 3,
								name: '输入文本',
								phone: '请输入电话'
							},
							{
								userId: 4,
								name: '输入文本',
								phone: '请输入电话'
							}
						]
					},
					{
						id: 2,
						time: '上午7：50-12：00',
						info: [
							{
								userId: 5,
								name: '输入文本',
								phone: '请输入电话'
							},
							{
								userId: 6,
								name: '输入文本',
								phone: '请输入电话'
							},
							{
								userId: 7,
								name: '输入文本',
								phone: '请输入电话'
							},
							{
								userId: 8,
								name: '输入文本',
								phone: '请输入电话'
							}
						]
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.headPicture{
		width: 100%;
		height: 296rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.container{
		width: 100%;
		position: absolute;
		top: 253rpx;
		border-top-left-radius: 15px;
		border-top-right-radius: 15px;
		background-color: #fff;
		.notice{
			margin-top: 37rpx;
			text-align: center;
			font-size: 16px;
			font-weight: revert;
		}
		.threeBox{
			margin-top: 25rpx;
			display: flex;
			width: 100%;
			height: 280rpx;
			justify-content: space-around;
			.Box{
				padding: 0;
				text-align: center;
				font-size: 12px;
				color: #fff;
				width: 26%;
				height: 93%;
				background-color: #2679e3b3;
				border-radius: 10px;
				box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.3);
				transition: transform 0.3s ease, box-shadow 0.3s ease;
				.BoxTitle{
					height: 14%;
				}
				image{
					width: 101%;
					height: 86%;
					border-bottom-left-radius: 10px;
					border-bottom-right-radius: 10px;
				}
			}
		}
		.PlanTable{
			padding-top: 37rpx;
			width: 100%;
			min-height: 711rpx;
			background-image: url('https://gd-hbimg.huaban.com/80d1cb4ba0793870c73446c9fe91b1ccf3148269f5245-x4Mvyx_fw480webp');
			background-size: 100% 100%;
			.TableTitle{
				text-align: center;
				font-size: 16px;
				font-weight: revert;
				margin-bottom: 24rpx;
			}
			.table{
				width: 90%;
				margin: auto;
				.u-table{
					.u-th{
						border-color: black !important;
						background-color: #369DF2 !important;
					}
					border-color: black !important;
					.u-td{
						height: 254rpx;
						padding: 0 !important; 
						border-color: black !important;
						.td{
							line-height: 60rpx;
							width: 100%;
							height: 100%;
							border: none;
							border-color: black !important;
							border-right: none !important;
							border-bottom: 1px solid black;
						}
						.td:nth-last-child(1){
							border-bottom: none;
						}
					}
				}
			}
		}
	}
</style>
